<template>
  <div class="wrapper">
    <nut-infiniteloading
      @loadmore="onInfinite"
      :is-show-mod="true"
      :has-more="isHasMore"
      :is-loading="isLoading"
      :threshold="200"
    >
      <ul>
        <li v-for="(item, index) of listData" :key="index">
          <div class="patientInfo">
            <span class="index">序号：{{index+1}}</span>
            <span class="taskCode">任务编码：{{item.TaskCode}}</span>
            <span class="eventName">事件名称：{{item.EventName}}</span>
            <span class="firstAcceptTime">受理时刻：{{item.FirstAcceptTime}}</span>
            <div class="content">
              <div v-for="(info,index) of item.Info" :key="index" class="item">
                <div>序号：{{index+1}}</div>
                <div>病人数量：{{info.PatientNum}}</div>
                <div :style="{color:info.Color}">病情等级：{{info.DiseaseLevel}}</div>
                <div>送往医院：{{info.SendHospital}}</div>
                <div>操作时间：{{info.OperateTime}}</div>
                <div>操作人：{{info.Operater}}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </nut-infiniteloading>
    <nut-backtop :distance="100"></nut-backtop>
  </div>
</template>
<script>
export default {
  name: "PatientList",
  data() {
    return {
      page: 1,
      num: 4,
      isHasMore: true,
      isLoading: false,
      timer: null,
      patientData: {}
    };
  },
  methods: {
    onInfinite() {
      this.isLoading = true;
      this.timer = setTimeout(() => {
        if (this.page <= this.maxPages) {
          this.page = this.page + 1;
        } else {
          this.isHasMore = false;
        }
        this.isLoading = false;
      }, 100);
    }
  },
  destroyed() {
    clearTimeout(this.timer);
  },
  computed: {
    listData() {
      let list = this.$store.state.patientList;
      //console.log("list", JSON.stringify(list, null, 2));
      if (list != "") {
        return list.slice(0, this.num * this.page);
      }
    },
    maxPages() {
      let list = this.$store.state.patientList;
      if (list != "") {
        return parseInt(list.length / this.num) + 1;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.patientInfo {
  // height: 5.8rem;
  background: #eee;
  // margin: 10px 0;
  // padding: 10px;
  display: flex;
  flex-direction: column;
  // justify-content: space-around;
  padding: 0.1rem;
  margin-top: 0.2rem;
}
.content {
  display: flex;
  flex-direction: column;
}
.index,
.taskCode,
.eventName,
.firstAcceptTime {
  font-weight: bold;
  padding: 0.02rem;
}

.item {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: 0.2rem;
}
.item > div {
  padding: 0.03rem;
}
</style>
